<template>
  <div
    ref="parentRef"
    class="List"
    style="height: 800px; width: 800px; overflow: auto">
    <button @click="test">test</button>
    <div
      :style="{
        height: `${totalSize}px`,
        width: '100%',
        position: 'relative',
      }">
      <div
        v-for="virtualRow in virtualRows"
        :key="virtualRow.index"
        :class="virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'"
        :style="{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: `${virtualRow.size}px`,
          transform: `translateY(${virtualRow.start}px)`,
        }">
        Row {{ virtualRow.index }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, PropType } from "vue";
import { useVirtualizer } from "@tanstack/vue-virtual";
import { MyPromise, TaskLimit } from "./test.ts";
import router from "@/router";
import { onMounted } from "vue";
const props = defineProps({
  rows: {
    type: Array as PropType<number[]>,
    default: () => [
      100, 100, 100, 100, 100, 100, 200, 5000, 100, 100, 100, 100, 100, 100,
      100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
      100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
      100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100,
    ],
  },
});

const parentRef = ref<HTMLElement | null>(null);

const rowVirtualizer = useVirtualizer({
  count: props.rows.length,
  getScrollElement: () => parentRef.value,
  estimateSize: (i) => props.rows[i],
  overscan: 5,
  paddingStart: 100,
  paddingEnd: 100,
});

const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems());
const totalSize = computed(() => rowVirtualizer.value.getTotalSize());
const promiseList = [
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(2);
    }, 3000);
  }),
  new Promise((resolve) => {
    resolve(1);
  }),
];

// 直接使用 MyPromise.allSettled
MyPromise.allSettled(promiseList)
  .then((res) => {
    console.log("Promise:", res);
  })
  .catch((err) => {
    console.log("Promise:Error:", err);
  });

// 或者使用 Promise.allSettled 来对比
Promise.allSettled(promiseList)
  .then((res) => {
    console.log("Native Promise:", res);
  })
  .catch((err) => {
    console.log("Native Promise:Error:", err);
  });
// router.push({
//   name:'test-picker',
// })
const len = 30;
const taskLimit = new TaskLimit(5);
const task = async (i:number) => {
 return await new Promise((resolve) => {
    setTimeout(() => {
      resolve(i);
      console.log("done",i);
    }, 1000);
  });
};
const test = async () => {
  const tasks = Array.from({ length: len }).map((_,i)=>{
    return ()=>task(i);
  })
  const res = await taskLimit.runBatch(tasks);
  console.log("done",res);
};
</script>
<style lang="less" scoped>
.List {
  border: 1px solid #e6e4dc;
  max-width: 100%;
}

.ListItemEven,
.ListItemOdd {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid blue;
}

.ListItemEven {
  background-color: #e6e4dc;
}
</style>
